<script setup lang="ts">

import VneueForm from "@/views/venue/form/vneueForm.vue";
import {deleteVneue, InquireVneue, type Query, type VneueDto, type VneueVo} from "@/apis/vneue";
import type {Ref} from "vue-demi";
import {useUserStore} from "@/stores";
import type {img} from "@/components/ImgUpload/index.vue";
import {Message} from "@arco-design/web-vue";

const formVisible = ref(false);

const dto:Ref<VneueDto> = ref({
  id: 0,
  description: '',
  history: '',
  ossId: '',
  updateBy: useUserStore().userInfo.id,
  updateTime: '',
  status: ''
})

const query: Ref<Query> = ref({
  pageNum: 1,
  pageSize: 10,
  description: '',
  status: null
})

const data:Ref<VneueVo[]> = ref([])

const Img:Ref<img[]> = ref([])

const scroll = ref({
  x: 1300,
  y: 700
})

const clickAddHandler = () => {
  formVisible.value = true;
}

const clickEditHandler = (data:VneueVo) => {

  dto.value.id = data.id
  dto.value.description = data.description
  dto.value.history = data.history

  dto.value.updateBy = useUserStore().userInfo.id
  dto.value.status = data.status

  for (let i = 0; i < data.file.length; i++) {
    Img.value.push({
      id: data.file[i].ossId,
      src: import.meta.env.VITE_API_BASE_URL + data.file[i].clientUrl,
      isNow: false
    })
  }
  console.log(Img.value)

  formVisible.value = true
}

const clickDelHandler = (data:VneueVo) => {
  deleteVneue(data.id).then(res => {
    Message.success({
      content:"删除成功"
    })
    getList()
  })

}

const getList = () => {
  InquireVneue(query.value).then(res => {
    data.value = res.data.data.records as VneueVo[]
  })
}

getList()
</script>

<template>
<div class="main">

  <vneue-form
      @ok="getList"
      v-model:visible="formVisible"
      v-model:dto="dto"
      v-model:img="Img" />

  <a-space direction="vertical" :size="16">

    <a-row :gutter="10" >

      <a-col :span="3">
        <a-input v-model="query.description" placeholder="请输入场景简述信息" />
      </a-col>

      <a-col :span="2">
        <a-select v-model="query.status" placeholder="请选择状态" allow-clear>

          <a-option :value="1" >
            <a-tag color="green">启用</a-tag>
          </a-option>

          <a-option :value="0">
            <a-tag color="red">不启用</a-tag>
          </a-option>

        </a-select>
      </a-col>

      <a-col :span="2">
        <a-button type="outline" @click="getList">查询</a-button>
      </a-col>

    </a-row>

    <a-row>

      <a-col>
        <a-button type="primary" @click="clickAddHandler">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>
      </a-col>

    </a-row>


    <a-row justify="center">
      <a-col :span="23">
        <a-table :data="data"
          :scroll="scroll"
        >
          <template #columns>
            <a-table-column title="场景ID" data-index="id"  />
            <a-table-column title="场景简述" data-index="description" width="500"  ellipsis />
            <a-table-column title="上传者" data-index="updateBy"  />
            <a-table-column title="上传时间" data-index="updateTime"  />

            <a-table-column title="状态" data-index="status">
              <template #cell="{ record }">
                <a-tag v-if="record.status === 1" color="green">启用</a-tag>
                <a-tag v-if="record.status === 0" color="red">不启用</a-tag>
              </template>
            </a-table-column>

            <a-table-column title="操作" >
              <template #cell="{ record }">
                <a-button type="text" @click="clickEditHandler(record)">修改</a-button>
                <a-button type="text" status="danger" @click="clickDelHandler(record)">删除</a-button>
              </template>
            </a-table-column>

          </template>
        </a-table>
      </a-col>
    </a-row>


  </a-space>

</div>
</template>

<style scoped lang="scss">
.main {
  padding: 20px;
}
</style>